<template>
  <section class="left-side">
    <sidebar-logo/>
    <!--        <el-scrollbar wrap-class="scrollbar-wrapper">-->
    <div class="l-menu">
      <router-link
        :to="item.path"
        v-for="(item,index) in menus"
        :key="index + item.path"
        class="l-menu-item pointer d-aic"
        :class="{active: index === activeIndex}">
        <span class="material-icons left-icon">{{ item.meta.icon }}</span>
        {{ (item.meta.title)||item.path }}
        <!--悬浮显示-->
        <!--        <div v-if="index !== activeIndex && item.hideChildrenInMenu!==true" class="hover-transition">-->
        <!--          <right-side :parent="item" class="float-side"/>-->
        <!--        </div>-->
      </router-link>
    </div>
    <div class="message-icon-wrap d-jcc-aic">
      <a-icon type="message" class="message-icon"/>
    </div>
  </section>
</template>

<script>
  import SidebarLogo from './logo'
  import RightSide from './right-side'

  export default {
    name: 'LeftSide',
    components: { RightSide, SidebarLogo },
    props: {
      activeIndex: {
        type: Number,
        default: null
      },
      menus: {
        type: Array,
        default: () => []
      }
    },
    methods: {

      clickRoute (route) {
        // 如果是single则直接使用第一个子路由的地址，否则进入子路由第一个
        if (route.children && route.children.length > 0) {
          const child = route.children[0]
          let path = child.path
          if (child.children && child.children.length > 0) {
            path = child.children[0].path
          }
          this.$router.push(path)
        }
      }

    }
  }
</script>

<style lang="less" scoped>

  .left-side::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .left-side {
    width: 120px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    position: relative;
    background: #283542;

    .message-icon-wrap {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 120px;
      height: 48px;
      background-color: #374554;

      .message-icon {
        font-size: 22px;
        color: #C2C2C3;
      }
    }

    .left-icon {
      margin-right: 6px;
      font-size: 18px;
      color: white;
    }

    .l-menu {
      border: none;
    }

    .l-menu-item {
      padding-left: 18px;
      background: #283542;
      height: 48px;
      line-height: 48px;
      color: white;
      transition: 0.1s;

      &:hover {
        background: #434E6B;

        .hover-transition {
          width: 120px;
          display: block;
        }
      }

      &.active {
        background: #2493FC;
      }

      .hover-transition {
        position: fixed;
        left: 120px;
        top: 0;
        width: 0;
        display: none;
        height: 100vh;
        overflow: hidden;
        transition: 0.1s;
        background: white;
        z-index: 9;
      }

      .float-side {
        width: 120px;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
  }
</style>
